<template>
  <div class="b-p-f">
    <div class="empty">
      <div class="img-container">
        <!-- svg -->
        <svg-icon
          v-if="emptyConfig.imageSvg"
          :icon-class="emptyConfig.imageSvg"
          :color="emptyConfig.color"
          :height="emptyConfig.height"
          :width="emptyConfig.width"
        />
      </div>
      <div class="description">
        <h1>{{ emptyConfig.title }}</h1>
        <h3 v-if="emptyConfig.description">{{ emptyConfig.description }}</h3>
      </div>
      <div class="actions" v-if="showActions">
        <el-button
          v-for="(action, index) in emptyConfig.actions"
          :key="index"
          :type="action.type"
          :size="action.size ? action.size : 'small'"
          :plain="action.plain ? action.plain : false"
          :round="action.round ? action.round : false"
          :circle="action.circle ? action.circle : false"
          class="action-button"
          @click="action.methodAction()"
        >
          {{ action.name }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    containerH: {
      type: String,
      default: "100vh",
    },
    showActions: {
      type: Boolean,
      default: true,
    },
    emptyConfig: {
      type: Object,
      default: () => {
        return {
          title: "暂无数据",
          description: "这里可以有你的描述文字",
          imageSvg: "empty",
          width: "20vh",
          height: "20vh",
          actions: [
            {
              name: "按钮",
              methodAction: () => {
                this.$message.success("点击了按钮");
              },
            },
          ],
        };
      },
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.empty {
  position: relative;
  min-height: v-bind(containerH);
  display: flex;
  flex-direction: column;
  justify-content: center;
  .img-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .description {
    text-align: center;
    margin-top: 50px;
  }
  .actions {
    width: 100%;
    position: absolute;
    bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
